@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <link href="/sitefiles/assets/css/menu.css" rel="stylesheet" type="text/css" />
}
<div class="d-flex align-items-center flex-column" id="sidebar" :style="{width: leftWidth + 'px'}" style="background-color:#f3f3f3 !important;">
    <div class="pt-5 text-center">
        <img :src="avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle avatar-lg" />
        <div class="mt-2">{{ displayName }}</div>
    </div>
    <div class="mt-auto mb-auto">
        <div class="mb-3">
            <button class="btn border-0 btn-lg rounded-pill px-4" :class="defaultActive==='index'?'btn-dark':'btn-outline-dark'" v-on:click="btnTopMenuClick('index')"><i class="el-icon-star-off me-2"></i>待 办</button>
        </div>
                <div class="mb-3"> 
            <button class="btn border-0 btn-lg rounded-pill px-4"  :class="defaultActive==='exam'?'btn-dark':'btn-outline-dark'" v-on:click="btnTopMenuClick('exam')"><i class="el-icon-eleme me-2"></i>考 试</button>
            </div>
        <div class="mb-3" v-if="systemCode==='Elearning'">    
            <button class="btn border-0 btn-lg rounded-pill px-4"  :class="defaultActive==='study'?'btn-dark':'btn-outline-dark'" v-on:click="btnTopMenuClick('study')"><i class="el-icon-reading me-2"></i>学 习</button>
            </div>
            <div class="mb-3">    
            <button class="btn border-0 btn-lg rounded-pill px-4"  :class="defaultActive==='more'?'btn-dark':'btn-outline-dark'" v-on:click="btnTopMenuClick('more')"><i class="el-icon-more me-2"></i>更 多</button>
            </div>
        <div>   
            <button class="btn border-0 btn-lg rounded-pill px-4"  :class="defaultActive==='mine'?'btn-dark':'btn-outline-dark'" v-on:click="btnTopMenuClick('mine')"><i class="el-icon-user me-2"></i>我 的</button>
            </div>
    </div>
    <div class="pb-5">
        <button class="btn btn-outline-dark btn-lg border-0 rounded-pill" v-on:click="loginOut"><i class="el-icon-switch-button me-2"></i>退 出</button>
    </div>
</div>
<div :style="{width: (winWidth - leftWidth) + 'px', marginLeft: leftWidth + 'px'}">
    <iframe class="rounded-0" id="frmRight" ref="frmRight" :src="defaultSrc" style="width: 100%; height: 100%; border: none" :style="{height: (winHeight) + 'px'}"></iframe>
</div>
<template>
    <el-drawer :title="topFrameTitle" destroy-on-close
               :size="topFrameWidth+'%'"
               :visible.sync="topFrameDrawer"
               direction="ltr">
               <div slot="title" class="text-center">{{topFrameTitle}}</div>
        <iframe :src="topFrameSrc" style="width: 100%; height: 100%; border: none" :style="{height: (winHeight - 56) + 'px'}"></iframe>
    </el-drawer>
</template>
@section Scripts{
    <script src="/sitefiles/assets/js/home/index.js" type="text/javascript"></script>
}
